<template>
  <div class="page-container" v-global-loading="loading">
    <div class="page-card-container">
      <a-form :model="pageSet" layout="inline">
        <a-form-item label="名称">
          <a-input
            v-model:value="pageSet.name"
            style="width: 170px"
            :allowClear="true"
          ></a-input>
        </a-form-item>
        <a-form-item label="状态">
          <a-select
            v-model:value="pageSet.status"
            style="width: 150px"
            allowClear
          >
            <a-select-option :value="1">启用</a-select-option>
            <a-select-option :value="0">停用</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="是否显示在首页">
          <a-select v-model:value="pageSet.publishStatus" style="width: 150px">
            <a-select-option :value="true">是</a-select-option>
            <a-select-option :value="false">否</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="">
          <div class="commonBtn-warning" @click="loadPagination(true)">
            查询
          </div>
        </a-form-item>
        <a-form-item label="">
          <div class="commonBtn-primary" @click="reset">重置</div>
        </a-form-item>
        <a-form-item label="">
          <div class="commonBtn-primary" @click="operation(1)">新建</div>
        </a-form-item>
      </a-form>
      <a-table
        size="small"
        :loading="tableLoading"
        :dataSource="tableData"
        :columns="columns"
        bordered
        :pagination="false"
        :scroll="{
          x: 1200,
          y: useAppStore.pageCommonInfo.canUseHeight - 36 + 'px'
        }"
      >
        <template #bodyCell="{text, record, index, column}">
          <template v-if="column.title == '操作'">
            <span
              class="pointer c-primaryColor"
              onselectstart="return false"
              @click="operation(3, record)"
              >&nbsp; 编辑</span
            >
            <span
              class="pointer c-primaryColor"
              onselectstart="return false"
              @click="operation(4, record)"
              >&nbsp; 删除</span
            >
            <span
              class="pointer c-primaryColor"
              onselectstart="return false"
              @click="operation(5, record)"
              >&nbsp; {{ record.status == 1 ? "停用" : "启用" }}</span
            >
          </template>
        </template>
      </a-table>
      <Pagination
        :pageSet="pageSet"
        style="margin-top: 10px"
        :loadPagination="loadPagination"
      ></Pagination>
      <a-modal
        v-model:open="visible"
        width="600px"
        :title="title"
        :footer="null"
        :maskClosable="false"
      >
        <div v-global-loading="modalloading">
          <a-form :labelCol="{span: 6}" :model="form" ref="formRef">
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item
                  label="名称"
                  name="name"
                  :rules="[{required: true, message: '请填写'}]"
                >
                  <a-input v-model:value="form.name" />
                </a-form-item>
                <a-form-item label="状态" name="status">
                  <a-radio-group
                    v-model:value="form.status"
                    name="status"
                    :disabled="form.id"
                  >
                    <a-radio :value="1">启用</a-radio>
                    <a-radio :value="2">停用</a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                  label="是否显示首页"
                  name="isHide"
                  :labelCol="{span: 9}"
                >
                  <a-radio-group v-model:value="form.isHide" name="isHide">
                    <a-radio :value="true">是</a-radio>
                    <a-radio :value="false">否</a-radio>
                  </a-radio-group>
                </a-form-item>
                <a-form-item label="排序" name="sort">
                  <a-input-number
                    v-model:value="form.sort"
                    style="width: 150px"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
          <div style="display: flex; justify-content: end">
            <a-button style="margin-right: 14px" @click="visible = false"
              >取消</a-button
            >
            <a-button type="primary" @click="operation(2)">确定</a-button>
          </div>
        </div>
      </a-modal>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {ref, inject, onActivated, onMounted, nextTick} from "vue";
import {
  hotwordinfoCreate,
  hotwordinfoUpdate,
  hotwordinfoDelete,
  hotwordinfoDetail,
  hotwordinfoPage,
  hotwordinfoList,
  hotwordinfoChangeStatus
} from "@/api/merchandise/hotWord";
import useAppStore from "@/store/app";
import Pagination from "@/components/pagination/Pagination.vue";
import {message, Modal} from "ant-design-vue";
const calcCanUseHeight: any = inject("calcCanUseHeight");
onActivated(() => {
  calcCanUseHeight();
});
onMounted(() => {
  calcCanUseHeight();
});
const loading = ref(false);
const tableLoading = ref(false);
const tableData = ref([]);
const visible = ref(false);
const title = ref("新建");
const form = ref<any>({});
const formRef = ref();
const modalloading = ref(false);
const pageSet = ref<any>({
  pageNo: 1,
  pageSize: 20,
  total: 0
});
//操作
const operation = (type: number, data?: any) => {
  if (type == 1) {
    //新建
    form.value = {isHide: true, status: 1};
    visible.value = true;
    title.value = "新建";
  } else if (type == 2) {
    //提交数据
    if (form.value.id) {
      modalloading.value = true;
      //编辑
      hotwordinfoUpdate(form.value)
        .then(() => {
          message.success("编辑成功");
          visible.value = false;
          loadPagination();
        })
        .finally(() => {
          modalloading.value = false;
        });
    } else {
      modalloading.value = true;
      //创建
      hotwordinfoCreate(form.value)
        .then(() => {
          message.success("创建成功");
          visible.value = false;
          loadPagination();
        })
        .finally(() => {
          modalloading.value = false;
        });
    }
  } else if (type == 3) {
    //编辑
    loading.value = true;
    hotwordinfoDetail({id: data.id})
      .then((res) => {
        form.value = res.data;
        visible.value = true;
        title.value = "编辑";
      })
      .finally(() => {
        loading.value = false;
      });
  } else if (type == 4) {
    //删除
    Modal.confirm({
      title: "确定要删除该数据嘛",
      onOk() {
        loading.value = true;
        hotwordinfoDelete({id: data.id})
          .then((res) => {
            message.success("删除成功!");
            loadPagination(true);
          })
          .finally(() => {
            loading.value = false;
          });
      }
    });
  } else if (type == 5) {
    //状态
    let name = data.status == 1 ? "停用" : "启用";
    Modal.confirm({
      title: `确定要${name}该数据吗?`,
      onOk() {
        loading.value = true;
        hotwordinfoChangeStatus({id: data.id, status: data.status == 1 ? 0 : 1})
          .then((res) => {
            message.success("操作成功!");
            loadPagination(true);
          })
          .finally(() => {
            loading.value = false;
          });
      }
    });
  }
};
//获取数据
const loadPagination = (flag: boolean = false): void => {
  if (flag) {
    pageSet.value.pageNo = 1;
  }
  tableLoading.value = true;
  hotwordinfoPage(pageSet.value)
    .then((res) => {
      tableData.value = res.data.rows;
      pageSet.value.total = res.data.totalRows;
    })
    .finally(() => {
      tableLoading.value = false;
    });
};
//重置
const reset = (): void => {
  pageSet.value = {
    pageNo: 1,
    pageSize: 20,
    total: 0
  };
  loadPagination(true);
};
const columns = ref<Array<object>>([
  {
    title: "序号",
    dataIndex: "index",
    align: "center",
    width: 80,
    customRender: ({index}) => {
      return index + 1;
    }
  },
  {
    title: "名称",
    dataIndex: "name",
    align: "center",
    width: 500
  },
  {
    title: "状态",
    dataIndex: "status",
    align: "center",
    width: 120,
    customRender: ({value}) => {
      return value == 1 ? "启用" : "停用";
    }
  },
  {
    title: "是否显示首页",
    dataIndex: "isHide",
    align: "center",
    width: 140,
    customRender: ({value}) => {
      return value ? "是" : "否";
    }
  },
  {
    title: "排序",
    dataIndex: "sort",
    align: "center",
    width: 100
  },
  {
    title: "操作",
    dataIndex: "caozuo",
    align: "center",
    width: 200,
    fixed: "right"
  }
]);
loadPagination(true);
</script>
<style lang="less" scoped></style>
